<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>钢缆仓库管理系统</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/home.css">
    <style>
        .layui-tab{
            margin-top: 0px;
            margin-bottom: 0px;
        }
        /*#main-frame{*/
            /*height: 90%;*/
        /*}*/
        /*.layui-tab-title li{*/
            /*font-size: 12px;*/
        /*}*/
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
        <div class="layui-logo" >
           <h2 style="color: #f0fcfa;font-size: 20px;letter-spacing: 0.1em">德尔福WMS系统</h2>
        </div>

            <ul class= "layui-nav layui-layout-left" lay-filter="" >
            <li class="layui-nav-item">
                <a href="">系统管理</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="/account" class="sm" target="iframe">用户管理</a></dd>
                    <dd><a href="/role" class="sm"  target="iframe">角色管理</a></dd>
                    <dd><a href="/resource" class="sm"  target="iframe">权限设置</a></dd>
                    <dd><a href="/role/moshi" class="sm"  target="iframe">运行模式设置</a></dd>
                    <dd><a href="/role/gong" class="sm"  target="iframe">供应商管理</a></dd>
                    <dd><a href="/role/sheng" class="sm"  target="iframe">生产计划导入</a></dd>
                    <dd><a href="/role/cang" class="sm"  target="iframe">仓位设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="">入库管理</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="/zcdj" class="sm"  target="iframe">扫描入库</a></dd>
                    <dd><a href="/order/shou" class="sm"  target="iframe">手工录入</a></dd>
                    <dd><a href="/order/yu" class="sm"  target="iframe">余料回收</a></dd>
                    </dl>
            </li>
            <li class="layui-nav-item">
                <a href="">出库管理</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="/return" class="sm"  target="iframe">出货方式</a></dd>
                    <dd><a href="/return/yuan" class="sm"  target="iframe">出货原则</a></dd>
                    <dd><a href="/return/ku" class="sm"  target="iframe">库存调整</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="">退货管理</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="/xinxi/list" class="sm"  target="iframe">手工点选退货</a></dd>
                    <dd><a href="/weixiu/list" class="sm"  target="iframe">非合格品退货</a></dd>
                    <dd><a href="/zuyong/list" class="sm"  target="iframe">退货记录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="">库内管理</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="/client" class="sm"  target="iframe">数据清单</a></dd>
                    <dd><a href="/credit/pan" class="sm"  target="iframe">货品盘点</a></dd>
                    <dd><a href="/credit" class="sm"  target="iframe">抽检记录</a></dd>
                    <dd><a href="/black" class="sm"  target="iframe">厂商黑名单</a></dd>
                </dl>
            </li>
            </ul>

        <ul class="layui-nav layui-layout-right" >
            <li class="layui-nav-item">
                <a href="javascript:;">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    ${account.userName}
                </a>
                <dl class="layui-nav-child">
                    <dd id="basic-message"><a href="javascript:">个人信息</a></dd>
                    <dd id="change-pwd"><a href="javascript:">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" id="out"><a href="/login">退出</a></li>
        </ul>
    </div>

        <div class="layui-side layui-bg-black" >
            <div class="layui-side-scroll" >
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="nav-tree">
                <c:forEach items="${menu}" var="menu" varStatus="a">
                    <li class="layui-nav-item " >
                        <a class="" href="javascript:" >${menu.name}</a>
                        <c:forEach items="${menu.submenus}" var="sm">
                            <dl class="layui-nav-child">
                                <input type="text" class="input" style="display: none" value="${sm.url}">
                                <dd  data-uri="${sm.url}"><a href="javascript:" class="sm">${sm.name}</a></dd>
                            </dl>
                        </c:forEach>
                    </li>
                </c:forEach>
            </ul>

        </div>

        </div>


        <div class="layui-body">

            <%--tab选项卡--%>
            <%--<div class="layui-tab" lay-filter="demo" lay-allowClose="true" >--%>
                <%--<ul class="layui-tab-title"></ul>--%>
            <%--</div>--%>
            <iframe id="main-frame" name="iframe" src="/static/tu.html">
            </iframe>

        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © scudxa.com - 钢缆仓库管理系统
        </div>
    </div>
</div>
<script src="/static/plugins/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<script src="/static/js/home.js"></script>
<script>
    layui.use(['element','layer'], function () {
        var $ = layui.jquery,
            element = layui.element;
            layer=layui.layer;
        element.on('nav(nav-tree)', function (elem) {  //绑定左侧菜单点击事件
            $("#main-frame").attr("src",elem.data("uri"));
        });

        $("#change-pwd").on("click",function () {
            layer.open({
                type:2,
                area:['500px','400px'],
                title:"密码修改",
                content:"/password"
            })
        });

        $("#basic-message").on("click",function () {
            layer.open({
                type:2,
                area:['500px','400px'],
                title:"个人基本信息",
                content:"/login/page"
            })
        });




        var val="",val2="";

        $(".sm").click(function () {
           val= $(this).text();
           val2 = $(".input").val();


        });
        var active = {
            tabAdd: function (url, id) {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: val//用于演示
                    , content: '<iframe data-frameid="'+id+'" frameborder="0" name="content" scrolling="no" width="100%" src="' + url + '"></iframe>'
                    , id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //切换到：用户管理
                $("iframe[data-frameid='"+id+"']").attr("src",$("iframe[data-frameid='"+id+"']").attr("src"))//切换后刷新框架
            }
            , tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            }
            , tabDeleteAll: function (ids) {//删除所有
                $.each(ids, function (i,item) {
                    element.tabDelete("demo", item);
                })
            }
        };

        $(".layui-nav-child a").click(function () {
            var dataid = $(this);
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"));
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"));
                }
            }
            active.tabChange(dataid.attr("data-id"));
        })




    });
</script>
</body>
</html>